<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <title>路由</title>
  <style>
    
  </style>
</head>
<body>
  <div id="app">
    <router-link :to="{path: '/list/1/99'}">列表1</router-link>
    <router-link to="/list/2/88">列表2</router-link>
    <router-link to="/list/3/90">列表3</router-link>
    <router-view></router-view>
  </div>

  
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    
    /*
      let const会创建块级 不会变量提升
      默认参数
      类定义与继承，引入类class关键字、构造函数constructor、和extend继承
      for...of  语句创建一个遍历可迭代对象的循环
      展开运算符  {...obj1, ...obj2}
      Promise
      模块导出  import * from *    export default *

      IIFE立即调用的函数表达式
          避免污染全局命名空间
      在全局作用域内和object.prototype属性中使用function
      大多数情况使用箭头函数？
        作用域安全性：函数所有都保证使用与根对象相同的this，
        使用箭头函数可以明确知道当前this指向

      展开运算符可以轻松创建函数或对象的副本，而无需借助于object.create,slice

      Student.prototype = Object.create(Person.prototype)
      Student.prototype.constructor = Student
      
      class Student extends Person {
        constructor(name, studentId){
          super(name)
          this.studentId = studentId
        }
      }

      .call 和 .apply 区别是啥
        都是用于调用函数，.call逗号分开作为下一个参数，而.apply将参数用数组参数
      
      JS的提升是什么？
        提升是指JS解释器将所有变量和函数声明移动当前作用域顶部，变量提升和函数提升

      什么时候不使用箭头函数？
        当函数需要被提升的使用
        要在行数使用this/arguments时，箭头函数本身不具有this/argument，因此他们
            取决于上下文
        使用命名函数
    */



    /*
      函数式编程核心原则
        1，纯函数 --- 接受一个输入或参数，返回输出一些东西
              function a(number){ return number * number;}
              纯函数在外部独立于状态运行，所以他不应该依赖全局状态
        2，不变性 --- 不直接修改数据。

    */

    let List = {
      template: '<h1>List{{$route.params.id}}-{{$route.params.price}}</h1>',
      // 根据路由的变化去请求不同的数据
      watch:{
        $route(){
          console.log(this.$route.params)
        }
      },
      computed:{},
      mounted(){}
    }
  
    let router = new VueRouter({
      routes:[
        {
          path: '/list/:id/:price',
          component: List
        }
      ]
    })

    let vm = new Vue({
      el: '#app',
      data: {},
      router,
      methods:{}
    })

    
    /**
     * 
     * zhenduiwo shiwo shiwo danwule ta wo buyinggai geita jieda douxiangrangwozou
     * 
     * 
     * 

    刘振，从学校到北京，一起上课，一起下课，一起吃饭，一起回家
      毫无乐趣，不shuohua，不喜欢展示自己，
    与其看鸡汤，不如实际点
    xiangyao qu cesuo
        ganjue dajia douzai chushi ni:
            meigeren douhenmang ni mei name zhongyao
            renmen dou zhihui guanzhu ziji
            nihai jide jintian cheshang ren de xingwei ma
            women zhege xinxi baozha de shidai women zuode
            meijian shiqing zai beiren yinxiangzhong buhui
            chaoguo yitian women meigeren zai bieren yanli
            doushi yituan yinxiang, shenzhi dou jibuzhu ta
            zhangshenmeyang, 
    第一反应：
        逃避、
    每个人在别人心中就是一团印象，甚至连长相都不记得，名字都不记得了
        wanyaqin: qinqie, heshan, haoren, aixiao, 
        lxq: neixiang, buaishuohua, aixiao, 
        ljl: nengliao, 
        lhj: nengshuo, waixiang, aixiao, 
        yll: nengkaiwanxiao, xinzhikoukuai, 
        lmj: huopo, gaoxiao, zhudong, nengshuo, banshixiaolugao, 
        tsb: nengliao, youzhi, bushuohua, neixiang, qingshangdi, 
    改变、练习、
    她是普通人，neixiang，不爱shuohua，追求个性，
      染发、耳坠，衣服
      wogankan diyiji juede zhege dianshiju youdian yisi a 
      wo gang kaishi rangwo xiangqi lingyibu hanju jichengzhemen 
      yeshi xiaoyuan yeshi guizuxuexiao ,houlai caifaxian zheshi 
      manhua shijie he manhua renwu 
      
      端午只是一个漫画
      woxiang zhidao nage tushuguan kanbujian lian de nage nande shibushi manhua de zuozhe
      haishi nage chaoyouyu shi ganshenmede 
      sheizhi zhege manhuade zhujiao
      

      yuliang kanzheni de diyi fanying
          kongju: haipaziji buneng yingdui ta paochu de wenti
          jinzhang: ziji meiyou 
        解决：niye kanta 
      meijue geini shuohua de diyi fanying
        haipa: haipa ziji huida buhao, wa
        jinzhang: hapa ziji shuobuhao, 



      不完美是人生常态


      我也觉得有意识地静下心来，观察自己情绪的起伏和反应是一件很棒的事情。也是了解自己的一个好方法。观察自己遇到不同的事情和不同的人，内心的感觉什么。是高兴？激动？难过？害怕？还是愤怒？焦虑？询问自己为什么会有这样的感觉？有时候晚上睡觉前站在卫生间，我猛撩起刘海，注视着镜子里的自己，问自己：×××啊，将来你到底想要成为一个什么样的人呢？你会因为什么而高兴，又会因为什么而悲伤难过呢？青春的日子已经不多了，你预备怎么度过呢？
    */

  </script>
</body>
</html>